<template>
  <view class="bottom-popup">
    <view class="popup-mask" :class="{ 'mask-show': show }" @click="onClickMask"></view>

    <view class="safe-area popup-layout" :class="layoutClassName">
      <image class="icon-close" lazy-load :src="$oss('/common/close.png')" v-if="closeable" @click="onClose" />

      <view class="popup-head" v-if="title">{{ title }}</view>
      <scroll-view class="popup-body" scroll-y @scrolltolower="onScrolltolower">
        <slot />
      </scroll-view>
      <view class="popup-footer" v-if="confirmText">
        <button class="confirm" @click="confirm">{{ confirmText }}</button>
      </view>
    </view>
  </view>
</template>

<script>
import { computed } from 'vue'
import { usePopup } from '../hooks/popup'

export default {
  name: 'XuiBottomPopup',
  props: {
    // 是否显示关闭按钮
    closeable: Boolean,

    // 是否可以通过点击 mask 关闭
    closeOnClickMask: Boolean,

    title: String,
    confirmText: String,

    beforeClose: Function
  },
  emits: [
    'update:show',
    'close',
    'confirm',
    'scrolltolower',
    'click-mask'
  ],
  setup (props, { emit }) {
    const layoutClassName = computed(() => {
      const className = []

      if (show.value) className.push('layout-show')

      return className
    })

    const { show, open, close: popupClose } = usePopup()

    const onClose = () => {
      if (!props.beforeClose) {
        return close()
      }

      const isClose = props.beforeClose()
      isClose && close()
    }

    const close = () => {
      emit('close')
      popupClose()
    }

    const confirm = () => {
      emit('confirm')
    }
    const onScrolltolower = () => {
      emit('scrolltolower')
    }
    const onClickMask = () => {
      if (props.closeOnClickMask) close()
      else emit('click-mask')
    }

    return {
      layoutClassName,

      show,
      open,
      close,
      onClose,

      confirm,
      onScrolltolower,
      onClickMask
    }
  }
}
</script>

<style lang="scss">
.bottom-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  visibility: hidden;
  z-index: 1000;

  &.popup-show {
    visibility: visible;
  }

  .popup-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    transition: all 0.3s ease-in-out;
    opacity: 0;
    visibility: hidden;

    &.mask-show {
      visibility: visible;
      opacity: 1;
    }
  }

  .popup-layout {
    position: absolute;
    z-index: 1001;
    transition: all 0.3s ease-in-out;
    opacity: 0;
    visibility: hidden;
    max-height: 1000rpx;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 20rpx 20rpx 0 0;
    transform: translate(0, 100%);

    &.layout-show {
      transform: translate(0, 0);
      opacity: 1;
      visibility: visible;
    }

    .icon-close {
      width: 40rpx;
      height: 40rpx;
      position: absolute;
      top: 30rpx;
      right: 40rpx;
      z-index: 10;
    }

    .popup-body {
      // min-height: 742rpx;
      flex: auto;
      overflow-x: hidden;
      overflow-y: auto;
    }

    .popup-head {
      height: 112rpx;
      line-height: 112rpx;
      text-align: center;
      flex: none;
      font-size: 32rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: bold;
      color: #333333;
    }

    .popup-footer {
      min-height: 146rpx;
      flex: none;

      .confirm {
        height: 88rpx;
        line-height: 88rpx;
        margin: 30rpx;
        background: #eb0028;
        border-radius: 44rpx;
        font-size: 32rpx;
        font-weight: 600;
        color: #ffffff;
      }
    }
  }
}
</style>
